<template>
    <div class="pl-16px pt-16px pb-16px content-container">
        <div class="flex justify-between items-center user-info">
            <div class="flex items-center">
                <img src="" alt="">
                <div class="flex flex-col justify-center">
                    <p>皖仪科技</p>
                    <span>安徽皖仪科技股份有限公司</span>
                </div>
            </div>
            <div>
                <ul class="flex">
                    <li>
                        <p>5234</p>
                        <span>获赞</span>
                    </li>
                    <li>
                        <p>1207</p>
                        <span>评论</span>
                    </li>
                    <li>
                        <p>3.5w</p>
                        <span>粉丝</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.user-info{
    img{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 12px;
        & + div{
            text-align: left;
            p{
                font-size: 20px;
                font-weight: 700;
            }
            span{
                font-size: 14px;
                color: #999999;
                margin-top: 10px;
            }
        }
    }
    ul{
        li{
            text-align: center;
            padding: 0px 30px;
            position:relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            p{
                font-size: 20px;
                font-family: "DIN Web";
            }
            span{
                font-size: 12px;
                color: #999;
                margin-top: 10px;
            }
            &::after{
                content:'';
                width:1px;
                height:36px;
                position:absolute;
                right:0;
                top:50%;
                transform:translateY(-50%);
                background-color:var(--menuBorderColor);
            }
            &:last-child{
                &::after{
                    display: none;
                }
            }
        }
    }
    
}
</style>